<template>
  <van-nav-bar
    class="app-header"
    safe-area-inset-top
    :border="false"
  >
    <template #left>
      <section
        class="left"
        @click="clickLeft"
      >
        <slot
          v-if="slots.left"
          name="left"
        />
        <template v-else>
          <base-svg-icon
            icon-class="icon-header-back"
            class-name="icon-back"
          />
          返回
        </template>
      </section>
    </template>
    <template #title>
      <section class="center">
        <slot
          v-if="slots.center"
          name="center"
        />
        <section
          v-else
          class="label-text-wrap"
        >
          <span class="text">
            {{ $route.meta.title }}
          </span>
        </section>
      </section>
    </template>
    <template #right>
      <section class="right">
        <slot name="right" />
      </section>
    </template>
  </van-nav-bar>
</template>
<script lang="ts" setup name="AppHeader">
import { useSlots } from 'vue';

import { useRouter } from 'vue-router';

import { useAppStore } from '@/store/app';
import { debounce } from '@/utils/index';

const router = useRouter();
const slots = useSlots();
const appStore = useAppStore();

const tabBarPaths = appStore.tabBar.list.map((item:TypeObject) => item.path);
const whitePaths = [...tabBarPaths, '/error/401', '/error/404'];

const clickLeft = debounce(() => {
  if (slots.left) {
    return;
  }
  // TODO: 优化，根据路由判断是返回逻辑还是关闭逻辑，使用自己公司的中间件实现
  console.log('白名单路由：', whitePaths);

  router.back();
}, 200);
</script>
<style lang="scss" scoped>
.app-header {
  .left,
  .right {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: var(--#{$ns}-header-height);

    .icon-back {
      width: 24px;
      height: 24px;
    }
  }

  .center {
    box-sizing: border-box;
    height: var(--#{$ns}-header-height);

    .label-text-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .text {
        font-size: 16px;
        line-height: 24px;
        color: var(--#{$ns}-text-color-primary);
      }
    }
  }
}
</style>
